<template>
    <h2 style="text-align: center;">添加会员信息</h2>
    <table border="1" class="table table-bordered">
        <tbody>
            <tr>
                <th>会员名称</th>
                <th>
                    <input type="text" placeholder="请输入会员名称" v-model="Info.Member_Name"/>
                </th>
            </tr>

            <tr>
                <th>会员密码</th>
                <th>
                    <input type="password"  v-model="Info.Member_Password"/>
                </th>
            </tr>

            <tr>
                <th>会员头像</th>
                <th>
                    <img :src="Info.Member_Img"  style="width: 100px;height: 100px;"/>
                    <input type="file" @change="UpLoads" />
                </th>
            </tr>

            <tr>
                <th>会员年龄</th>
                <th>
                    <input type="text" placeholder="请输入会员年龄"  v-model="Info.Member_Age "/>
                </th>
            </tr>

            <tr>
                <th>会员状态</th>
                <th>
                    <input type="radio" :value="true" checked  v-model="Info.Member_State"/> 启用
                    <input type="radio" :value="false"  v-model="Info.Member_State" /> 禁用
                </th>
            </tr>

            <tr>
                <th>会员等级</th>
                <th>
                    <select v-model="Info.MemberRank_Id">
                        <option :value="-1">请选择</option>
                        <option v-for="item in InfoRank" :value="item.MemberRank_Id">{{ item.MemberRank_Name }}</option>
                    </select>
                </th>
            </tr>

            <tr>
                <th colspan="2" style="text-align: center;">
                    <input type="button" value="添加会员信息" class="btn btn-success"  @click="AddMember" style="margin-right: 10px;"/>
                    <a href="/ShowMember">返回列表</a>
                </th>
            </tr>
        </tbody>
    </table>
</template>


<script setup lang="ts">
    import {ref,onMounted} from 'vue';
    import axios from 'axios';
    import { useRouter } from 'vue-router';

    const router=useRouter();
    //添加响应式数据
    const Info=ref({
        Member_Name: "",
        Member_Password: "",
        Member_Img: "",
        Member_Age: "",
        Member_State: true,
        MemberRank_Id: -1
    })
    //等级响应式数据
    const InfoRank=ref([{
        MemberRank_Id: 0,
        MemberRank_Name: "",
    }])
    onMounted(()=>{
        GetMemberRank();//获取等级
    })
    //获取等级
    const GetMemberRank=()=>{
        axios.get("https://localhost:44390/api/Member/GetMemberRank")
        .then(res=>{
            InfoRank.value=res.data
        })
    }


    //图片上传
    const UpLoads=(img:any)=>{
        var file=img.target.files[0];
        var fd=new FormData();
        fd.append("File",file);
        axios.post("https://localhost:44390/api/FilesUpLoads/UpLoads",fd)
        .then(res=>{
            if(res.data.Comm_Code==-1)
            {
                alert(res.data.Comm_Msg);
            }
            else if(res.data.Comm_Code==-2)
            {
                alert(res.data.Comm_Msg);
            }
            else
            {
                Info.value.Member_Img=res.data.Comm_Path
            }
        })
    }
    //添加会员
    const AddMember=()=>{
        axios.post("https://localhost:44390/api/Member/AddMember",Info.value)
        .then(res=>{
            if(res.data==-1)
            {
                alert('会员名称已存在，请重新输入！');
                return;
            }
            if(res.data>0)
            {
                alert('会员信息添加成功');
                router.push("/ShowMember");
            }
            else
            {
                alert('会员信息添加失败');
            }
        })
    }

</script>